<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";

const orderId = ref('')
onLoad(async (e: any) => {
  orderId.value = e.orderNo
})
</script>

<template>
  <view class="bar"></view>

  <view>
    <image class="image" src="/static/images/order/success.png"/>
    <text class="text">订单支付成功！</text>
    <text class="text-item">感谢您的购买，我们会为您尽快处理</text>
    <text class="text-item" style="color: red">一分钟会自动发货，请注意刷新</text>
    <view class="btn-view">
      <navigator class="select-order" open-type="redirect"
                 :url="`/pages/user/order/orderDetail/orderDetail?id=${orderId}`">查看订单
      </navigator>
      <navigator class="back-home" open-type="switchTab" url="/pages/home/home">返回首页</navigator>
    </view>
  </view>
</template>


<style scoped lang="scss">
.image {
  width: 60vw;
  height: 60vw;
  margin: 100rpx 150rpx -50rpx 150rpx;
}

.text {
  display: block;
  width: 100vw;
  text-align: center;
  font-size: 48rpx;
  font-weight: bold;
}

.text-item {
  display: block;
  width: 100vw;
  text-align: center;
  font-size: 32rpx;
  color: #999;
  margin-top: 20rpx;
}

.btn-view {
  display: flex;
  align-items: center;
  margin-top: 100rpx;
  justify-content: space-around;
  background-color: #fff;
}

.back-home {
  display: block;
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #FF4948;
  color: #fff;
  border-radius: 10rpx;
  margin: 20rpx auto;
}

.select-order {
  display: block;
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #fff;
  border: 1rpx solid #FF4948;
  color: #FF4948;
  border-radius: 10rpx;
  margin: 20rpx auto;
}
</style>
